<template>
	<app-layout>
		<view v-if="customize">
			<image load-lazy='true' class='bg' :src='customize.head_bg ? customize.head_bg : checkImg.app_image.top_bg'>
			</image>
			<!-- 签到提醒 -->
			<view @click="changeSwitch" class='tips dir-left-nowrap cross-center' v-if="config.is_remind == 1">
				<text :style="{'color':`${customize.remind_font}`}">签到提醒</text>
				<switch style="transform:scale(0.7)" v-if="user.is_remind == 1" @change='toSwitch'
					:checked="user.is_remind"></switch>
				<switch style="transform:scale(0.7)" v-else @change='toSwitch' :checked="user.is_remind"></switch>
			</view>
			<!-- 规则 -->
			<view @click="toRules" class='icon'>
				<view class='rules'>签到规则</view>
			</view>
			<view @click="toIndex" class='icon toIndex'>
				<view class='rules'>回到首页</view>
			</view>
			<!-- 签到按钮 -->
			<view @click="subscribe" class='check-in-btn' v-if="user.today_check_in == null">
				<image load-lazy='true'
					:src='customize.not_signed_icon ? customize.not_signed_icon : checkImg.app_image.check_in'></image>
			</view>
			<view class='check-in-btn' v-else>
				<image load-lazy='true' :src='customize.signed_icon ? customize.signed_icon : checkImg.app_image.over'>
				</image>
			</view>
			<view :style="{'color':`${customize.daily_font}`}" class='no-check-in' v-if="user.today_check_in == null">
				今日还未签到</view>
			<view :style="{'color':`${customize.daily_font}`}" class='no-check-in' v-else>今日已签到</view>
			<view :style="{'color':`${customize.daily_font}`}" class='always'>已连续签到{{user.continue_day}}天</view>
			<!-- 签到奖励 -->
			<view class='other'
				:style="{'background':`linear-gradient(to bottom,${customize.end_bg},${customize.end_style == 1 ? customize.end_gradient_bg : customize.end_bg})`,'min-height':`${other_height}`}">
				<view class='reward' v-if="config.continue.length > 0">
					<view :class="[`reward-item`, `${item.day == config.continue[0].day ? 'no-top':''}`]"
						v-for="(item, index) in config.continue" :key="index"
						:style="{'border-color':`${customize.line_font}`}">
						<image load-lazy='true' class='reward-icon' v-if="item.type =='integral'"
							:src="customize.integral_icon ? customize.integral_icon : '/static/image/integral.png'">
						</image>
						<image load-lazy='true' class='reward-icon' v-if="item.type =='balance'"
							:src="customize.balance_icon ? customize.balance_icon : '/static/image/hongbao.png'">
						</image>
						<view class='reward-title'>连续签到{{item.day}}天</view>
						<view class='reward-content' v-if="item.type =='integral'">赠送{{item.number}}金币</view>
						<view class='reward-content' v-if="item.type =='balance'">赠送{{item.number}}元余额红包</view>
						<view class='reward-btn' v-if="item.check">
							<button class='over'
								:style="{'color':`${customize.prompt_font}`,'backgroundColor':`${customize.btn_bg}`}">已领取</button>
						</view>
						<view class='reward-btn' v-else-if="user.continue_day >= item.day" data-id="2"
							@click="getAward(2,item.day)">
							<button
								:style="{'color':`${customize.not_prompt_font}`,'backgroundColor':`${customize.not_btn_bg}`}">领取</button>
						</view>
					</view>
				</view>
				<view class='reward balance-reward' v-if="config.total.length > 0">
					<view class='reward-item' v-for="(item, index) in config.total" :key="index">
						<image load-lazy='true' class='reward-icon' v-if="item.type =='integral'"
							:src="customize.integral_icon ? customize.integral_icon : '/static/image/integral.png'">
						</image>
						<image load-lazy='true' class='reward-icon' v-if="item.type =='balance'"
							:src="customize.balance_icon ? customize.balance_icon : '/static/image/hongbao.png'">
						</image>
						<view class='reward-title'>累积签到{{item.day}}天</view>
						<view class='reward-content' v-if="item.type =='integral'">赠送{{item.number}}金币</view>
						<view class='reward-content' v-if="item.type =='balance'">赠送{{item.number}}元余额红包</view>
						<view class='reward-btn' v-if="item.check">
							<button class='over'>已领取</button>
						</view>
						<view class='reward-btn' v-if="user.total_day >= item.day && !item.check" data-id="3"
							@click="getAward(3,item.day)">
							<button
								:style="{'color':`${customize.not_prompt_font}`,'backgroundColor':`${customize.not_btn_bg}`}">领取</button>
						</view>
					</view>
				</view>
				<!-- 日历 -->
				<!-- #ifndef MP-BAIDU -->
				<view class='day'>
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU -->
					<view class='day' style="margin: 12px 18px;">
						<!-- #endif -->
						<view class='day-title main-center'>
							<view @click="lose">
								<view class="toggle-btn main-center">
									<image load-lazy='true' src='/static/image/icon/arrow-left.png'></image>
								</view>
							</view>
							<view class='date'>
								<text>{{year}}</text>
								<text>年</text>
								<text>{{month}}</text>
								<text>月</text>
							</view>
							<view @click="add">
								<view class="toggle-btn main-center">
									<image load-lazy='true' src='/static/image/icon/arrow-right.png'></image>
								</view>
							</view>
						</view>
						<view class='week main-between'>
							<view>日</view>
							<view>一</view>
							<view>二</view>
							<view>三</view>
							<view>四</view>
							<view>五</view>
							<view>六</view>
						</view>
						<view class='everyday main-between'>
							<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
							<view v-for="(item,index) in everyday" class='every' :key="index">
								<!-- #endif -->
								<!-- #ifdef MP-BAIDU || MP-ALIPAY -->
								<view v-for="(item,index) in everyday" class='every' style="width:28px;" :key="index">
									<!-- #endif -->
									<image load-lazy='true' v-if="item.check"
										:src="customize.calendar_icon ? customize.calendar_icon : './../image/choose.png'">
									</image>
									<view :class="[`${item.date > now ? 'next' : ''}`]">{{item.date}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='dialog' v-if="success || getRed">
			<view v-if="success" class='success'>
				<image load-lazy='true' class='success-img' v-if="success" :src='checkImg.app_image.success'></image>
				<image load-lazy='true' class='success-img' v-else :src='checkImg.app_image.get'></image>
				<view class='getPrice main-center'>
					<image load-lazy='true' v-if="result.type == 'integral'"
						:src="customize.integral_icon ? customize.integral_icon : '/static/image/integral.png'"></image>
					<text>+{{result.number}}</text>
				</view>
				<view v-if="success" class='info'>
					<text v-if="result.status == 1">签到成功</text>
					<text v-if="result.status == 2">已连续签到</text>
					<text v-if="result.status == 3">已累积签到</text>
					<text v-if="result.status != 1">{{result.day}}天</text>
				</view>
				<view class='info' v-else>恭喜获得签到奖励</view>
				<view @click="close">
					<button class='success-btn'>{{success ? '知道咯' : '收下奖励'}}</button>
				</view>
			</view>
			<view v-if="getRed" class='getRed'>
				<image load-lazy='true' class='getRed-img' :src='checkImg.app_image.getRed'></image>
				<view class='getRed-title'>恭喜获得签到奖励</view>
				<view class='getRed-price'>
					<text>+{{result.number}}</text>元
				</view>
				<view class='getRed-content'>余额红包</view>
				<view @click="close">
					<button class='getRed-btn'>收下奖励</button>
				</view>
				<view class='getRed-info'>
					<text v-if="result.status == 1">已签到</text>
					<text v-if="result.status == 2">已连续签到</text>
					<text v-if="result.status == 3">已累积签到</text>
					<text>{{result.day}}</text>天
				</view>
			</view>
			<view :class="[`close`,`${getRed ? 'get-close' : ''}`]" @click="close">
				<image load-lazy='true' :src='mallImg.close'></image>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				month: 1,
				year: 1990,
				everyday: [],
				config: [],
				user: {},
				result: {},
				other_height: '500rpx',
				now: 1,
				noday: ['', '', '', '', '', '', '', ''],
				week: 1,
				date: [],
				getRed: false,
				customize: null,
				page_loading: true,
				template_message: false,
				success: false
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
				mallImg: state => state.mallConfig.__wxapp_img.mall,
				checkImg: state => state.mallConfig.plugin.check_in
			})
		},
		methods: {
			toRules() {
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.check_in.index)}&keys=${JSON.stringify(['config', 'rule'])}`,
				});
			},
			toIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			getSetting() {
				let that = this;
				that.$request({
					url: that.$api.check_in.customize,
				}).then(response => {
					if (response.code == 0) {
						that.customize = response.data.list;
						that.getList();
					} else {
						that.$hideLoading();
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
			getList() {
				let that = this;
				that.$request({
					url: that.$api.check_in.index,
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						that.config = response.data.config;
						that.user = response.data.check_in_user;
						that.template_message = response.data.template_message;
						that.getEveryday();
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
			getEveryday() {
				let that = this;
				let month = that.month;
				let year = that.year;
				let day = 32;
				let everyday = [];
				if (month < 8 && month % 2 == 0 && month != 2) {
					day = 31;
				} else if (month > 7 && month % 2 == 1) {
					day = 31;
				} else if (month == 2) {
					if (year % 4 == 0 && year % 100 != 0) {
						day = 30;
					} else {
						day = 29;
					}
				}
				for (let i = 1; i < day; i++) {
					everyday.push({
						date: i,
						check: false
					})
				}
				let noday = that.noday;
				let before = that.week;
				for (let z = 0; z < before; z++) {
					everyday.unshift(noday[z])
				}
				if (everyday.length % 7 != 0) {
					let number = 7 - (everyday.length % 7);
					for (let y = 0; y < number; y++) {
						everyday.push(noday[y])
					}
				}
				that.everyday = everyday;
				that.getDay(year, month);
			},
			getDay(year, month) {
				let that = this;
				that.$request({
					url: that.$api.check_in.sign_in_day,
					data: {
						month: month,
						year: year
					}
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						let date = response.data.check_in_day;
						for (let i = 0; i < that.everyday.length; i++) {
							if (date.indexOf(that.everyday[i].date) > -1) {
								that.everyday[i].check = true;
							}
						}
						that.$forceUpdate();
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
			lose() {
				let month = this.month - 1;
				let year = this.year;
				let now = this.now;
				if (month < 1) {
					month = 12;
					year--;
				}
				let dayValue = year + "-" + month + '-01';
				var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
				this.week = day.getDay();
				var myDate = new Date();
				let nowYear = myDate.getFullYear();
				let nowMonth = myDate.getMonth() + 1;
				if (year == nowYear) {
					if (month > nowMonth) {
						now = 0;
					} else if (month < nowMonth) {
						now = 32;
					} else {
						now = myDate.getDate();
					}
				} else if (year > nowYear) {
					now = 0;
				} else {
					now = 32;
				}
				this.year = year;
				this.month = month;
				this.now = now;
				this.getEveryday();
			},
			// 月份增大
			add() {
				let month = this.month + 1;
				let year = this.year;
				let now = this.now;
				if (month > 12) {
					month = 1;
					year++;
				}
				let dayValue = year + "-" + month + '-01';
				var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
				this.week = day.getDay();
				var myDate = new Date();
				let nowYear = myDate.getFullYear();
				let nowMonth = myDate.getMonth() + 1;
				if (year == nowYear) {
					if (month > nowMonth) {
						now = 0;
					} else if (month < nowMonth) {
						now = 32;
					} else {
						now = myDate.getDate();
					}
				} else if (year > nowYear) {
					now = 0;
				} else {
					now = 32;
				}
				this.year = year;
				this.month = month;
				this.now = now;
				this.getEveryday();
			},
			subscribe() {
				this.$subscribe(this.template_message).then(res => {
					this.getAward(1);
				}).catch(res => {
					this.getAward(1);
				});
			},
			getAward(status, day) {
				let that = this;
				uni.showLoading({
					title: '领取中...'
				});
				that.$request({
					url: that.$api.check_in.sign_in,
					data: {
						status: status,
						day: day ? day : 1
					}
				}).then(response => {
					if (response.code == 0) {
						let queueId = response.data.queueId;
						let token = response.data.token;
						that.checkInResult(queueId, token);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.$store.dispatch('user/info');
						that.getAward(status, day);
					});
				});
			},
			checkInResult(queueId, token) {
				let that = this;
				that.$request({
					url: that.$api.check_in.sign_in_result,
					data: {
						queueId: queueId,
						token: token
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code == 0) {
						if (response.data.retry == 1) {
							that.checkInResult(queueId, token);
						} else {
							that.result = response.data
							if (that.result.type == 'integral') {
								that.success = true;
							} else if (that.result.type == 'balance') {
								that.getRed = true;
							}
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					uni.hideLoading();
				});
			},
			changeSwitch() {
				if (this.user.is_remind == 0) {
					this.$subscribe(this.template_message);
				}
			},
			toSwitch(e) {
				let that = this;
				let is_remind = 0;
				if (e.detail.value) {
					is_remind = 1;
				}
				that.$request({
					url: that.$api.check_in.user,
					data: {
						is_remind: is_remind
					}
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						this.user.is_remind = is_remind
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
			close() {
				this.success = false;
				this.getRed = false;
				this.getList();
			},
		},

		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.$children[0].navigationBarTitle,
				path: "/plugins/check_in/index/index",
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.$children[0].navigationBarTitle,
				query: {} // 此处填写页面的参数
			});
		},
		// #endif
		onLoad() {
			let that = this;
			wx.getSystemInfo({
				success: function(res, rect) {
					that.other_height = (res.windowHeight * 2 - 500) + 'rpx'
				}
			})
			var myDate = new Date();
			that.year = myDate.getFullYear();
			that.month = myDate.getMonth() + 1;
			that.now = myDate.getDate();
			let dayValue = that.year + "-" + that.month + '-01';
			let day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
			that.week = day.getDay();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			that.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			that.getSetting();
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: #{500rpx};
		display: block;
	}

	.tips {
		position: absolute;
		top: #{55rpx};
		left: #{30rpx};
		color: #fff;
		font-size: #{24rpx};
	}

	.icon {
		position: absolute;
		right: 0;
		top: #{55rpx};
	}

	.icon.toIndex {
		top:#{119rpx};
	}

	.rules {
		height: #{48rpx};
		line-height: #{46rpx};
		width: #{144rpx};
		text-align: center;
		padding: 0;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: #{24rpx};
		border-top-left-radius: #{24rpx};
		border-bottom-left-radius: #{24rpx};
		border: #{2rpx} solid #fff;
		border-right: 0;
	}

	.check-in-btn {
		height: #{260rpx};
		width: #{260rpx};
		position: absolute;
		top: #{60rpx};
		left: 50%;
		margin-left: #{-130rpx};
	}

	.check-in-btn image {
		height: #{260rpx};
		width: #{260rpx};
	}

	.no-check-in {
		font-size: #{32rpx};
		color: #fff;
		position: absolute;
		top: #{340rpx};
		left: 0;
		right: 0;
		text-align: center;
	}

	.always {
		font-size: #{28rpx};
		color: #fff;
		position: absolute;
		top: #{390rpx};
		left: 0;
		right: 0;
		text-align: center;
	}

	.reward {
		margin: 0 #{24rpx};
		border-radius: #{14rpx};
		padding: 0 #{40rpx};
		background-color: #fff;
	}

	.reward.balance-reward {
		margin-top:#{24rpx};
	}

	.reward-item {
		height: #{150rpx};
		border-top: #{1rpx} dashed #5997fc;
		color: #2c3c7e;
		font-size: #{26rpx};
		position: relative;
	}

	.reward-item.no-top {
		border-top: #{1rpx} dashed #fff !important;
	}

	.reward.balance-reward .reward-item {
		border-top: #{1rpx} solid #fff;
	}

	.reward-icon {
		float: left;
		height: #{72rpx};
		width: #{72rpx};
		margin-top: #{39rpx};
		margin-right: #{24rpx};
	}

	.reward-title {
		margin-top: #{40rpx};
	}

	.reward-content {
		margin-top: #{-3rpx};
	}

	.reward-btn {
		position: absolute;
		right: #{40rpx};
		top: #{47rpx};
	}

	.reward-btn button {
		border-radius: #{28rpx};
		width: #{150rpx};
		height: #{56rpx};
		line-height: #{56rpx};
		color: #fff;
		font-size: #{26rpx};
		background-color: #5997fc;
	}

	.reward-btn button::after {
		border: 0;
	}

	.reward-btn .over {
		background-color: #cdcdcd;
	}

	.day {
		margin: #{24rpx};
		background-color: #fff;
		border-radius: #{14rpx};
		z-index: 99;
		padding: #{40rpx} #{25rpx};
	}

	.day-title {
		height: #{30rpx};
		line-height: #{30rpx};
		margin-bottom: #{40rpx};
	}

	.day-title image {
		display: block;
		margin-top: #{4rpx};
		height: #{22rpx};
		width: #{12rpx};
	}

	.date {
		color: #353535;
		font-size: #{28rpx};
	}

	.week {
		color: #999;
		height: #{64rpx};
		border-bottom: #{1rpx} solid #e2e2e2;
		margin-bottom: #{16rpx};
	}

	.week view {
		height: #{64rpx};
		width: #{64rpx};
		margin: 0 #{15rpx};
		line-height: #{64rpx};
		text-align: center;
	}

	.everyday {
		flex-wrap: wrap;
	}

	.everyday .every {
		margin: 0 #{15rpx} #{8rpx};
		height: #{64rpx};
		width: #{64rpx};
		line-height: #{64rpx};
		text-align: center;
		position: relative;
	}

	.everyday .every image {
		height: #{64rpx};
		position: absolute;
		width: #{64rpx};
		top: 0;
		left: 0;
		display: block;
	}

	.every view {
		line-height: #{64rpx};
		position: absolute;
		height: #{64rpx};
		width: #{64rpx};
		top: 0;
		left: 0;
		z-index: 5;
	}

	.next {
		color: #999;
	}

	.dialog {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.success {
		position: fixed;
		top: #{350rpx};
		left: 0;
		right: 0;
		width: #{630rpx};
		margin: 0 auto;
		background-color: #fff;
		border-radius: #{16rpx};
		z-index: 1000;
		padding-bottom: #{64rpx};
	}

	.success .success-img {
		height: #{450rpx};
		width: #{630rpx};
		margin-top: #{-250rpx};
	}

	.getPrice {
		height: #{40rpx};
		line-height: #{40rpx};
		color: #ff4544;
		font-size: #{44rpx};
		margin-bottom: #{28rpx};
	}

	.success .getPrice image {
		height: #{40rpx};
		width: #{40rpx};
		margin-right: #{16rpx};
		display: block;
	}

	.info {
		font-size: #{32rpx};
		color: #353535;
		margin-bottom: #{44rpx};
		text-align: center;
	}

	.info text {
		color: #ff4544;
	}

	.success-btn {
		width: #{320rpx};
		height: #{72rpx};
		line-height: #{72rpx};
		font-size: #{32rpx};
		color: #fff;
		background-color: #ff4544;
		border-radius: #{36rpx};
		margin: 0 auto;
	}

	.success-btn::after {
		border: 0;
	}

	.getRed {
		height: #{460rpx};
		width: #{630rpx};
		position: fixed;
		top: #{330rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		font-size: #{28rpx};
		color: #ba7d44;
	}

	.getRed-img {
		height: #{460rpx};
		width: #{630rpx};
	}

	.getRed-title {
		position: fixed;
		text-align: center;
		left: 0;
		width: 100%;
		top: #{390rpx};
	}

	.getRed-price {
		color: #ff4544;
		position: fixed;
		text-align: center;
		left: 0;
		width: 100%;
		top: #{450rpx};
	}

	.getRed-price text {
		font-family: DIN;
		font-size: #{68rpx};
	}

	.getRed-content {
		position: fixed;
		text-align: center;
		left: 0;
		width: 100%;
		top: #{540rpx};
	}

	.getRed-btn {
		position: fixed;
		top: #{640rpx};
		left: 0;
		right: 0;
		margin: 0 auto;
		width: #{320rpx};
		height: #{72rpx};
		color: #ff4544;
		font-size: #{32rpx};
		line-height: #{72rpx};
		border-radius: #{36rpx};
		background: linear-gradient(to bottom, #ffe8bc, #ffcb7c);
	}

	.getRed-btn::after {
		border: 0;
	}

	.close {
		position: fixed;
		top: #{870rpx};
		height:#{30rpx};
		width:#{30rpx};
		left: 50%;
		margin-left: #{-15rpx};
		z-index: 1000;
	}

	.close image {
		height:#{30rpx};
		width:#{30rpx};
	}

	.get-close {
		top: #{800rpx};
	}

	.getRed-info {
		font-size: #{22rpx};
		position: fixed;
		top: #{724rpx};
		left: 0;
		right: 0;
		text-align: center;
		color: #ffcb7c;
	}

	.other {
		background: linear-gradient(to bottom, #2a3a7c, #5b7ac7);
		padding-bottom: #{40rpx};
		position: absolute;
		top: #{500rpx};
		left: 0;
		width: 100%;
	}

	.toggle-btn {
		width: #{150rpx};
	}
</style>
